<template>
	<view class="containner">
		<view class="companyInfo">
			<u-form :model="companyInfo" ref="uForm" label-width="auto">
				<u-form-item label="商家名称："><u-input v-model="companyInfo.name" placeholder="请输入您的企业名称" /></u-form-item>
				<u-form-item label="经营类目：">
					<u-input v-model="companyInfo.category" type="select" placeholder="请选择" :select-open="selectShow"
						@click="selectShow = true" />
				</u-form-item>
				<u-form-item label="商家地址：" prop="region">
					<u-input type="select" :select-open="pickerShow" v-model="companyInfo.region" placeholder="请选择"
						@click="pickerShow = true"></u-input>
				</u-form-item>
				<u-form-item label="商家名称："><u-input v-model="companyInfo.address" placeholder="精确到门牌号" /></u-form-item>
				<u-form-item label="营业执照：" prop="photo">
					<view class="photo">
						<u-icon name="/static/icon/ph@2x.png" size="95" @click="photo"></u-icon>
					</view>
				</u-form-item>
			</u-form>
			<!--  -->
			<u-select mode="single-column" :list="selectList" v-model="selectShow" @confirm="selectConfirm"></u-select>
			<u-picker mode="region" v-model="pickerShow" @confirm="regionConfirm"></u-picker>
		</view>
		<view class="userInfo">
			<u-form :model="companyInfo" ref="uForm" label-width="auto">
				<u-form-item label="联  系 人："><u-input v-model="companyInfo.name" placeholder="请输入您的真实姓名" /></u-form-item>
				<u-form-item label="联系电话："><u-input v-model="companyInfo.name" placeholder="请输入您的联系方式" /></u-form-item>
				<u-form-item label="请上传身份证正反面：" label-position="top" prop="photo">
					<view class="card">
						<Rboy-upload-sfz :obverse-url="companyInfo.obverseUrl" :reverse-url="companyInfo.reverseUrl" @selectChange="sfz_chagne" @del="del_btn"></Rboy-upload-sfz>
<!-- 						<view class="photos">
							<view class="photos1" @click="photo"></view>
						</view>
						<view class="photos">
							<view class="photos2" @click="photo"></view>
						</view> -->
					</view>
				</u-form-item>
			</u-form>
		</view>
		<view class="agreement">
			<u-checkbox v-model="check" @change="checkboxChange"></u-checkbox>
			<view class="agreement-text">
				勾选代表同意<text style="color: #01A90C;">《商家入驻协议》</text>
			</view>
		</view>
		<!-- 按钮 -->
		<view class="btns">
			<view class="btn">提交申请</view>
		</view>
	</view>
</template>

<script>
	// import RboyUploadSfz from "@/components/Rboy-upload-sfz/Rboy-upload-sfz.vue"
	export default {
		// components: {
		// RboyUploadSfz,
		// },
		data() {
			return {
				selectShow: false,
				pickerShow: false,
				check: false,
				agreement: false,
				fileList: [],
				action: 'http://127.0.0.1:7001/upload',
				companyInfo: {
					name: '',
					category: '',
					region: '',
					address: '',
					url: "",
					obverseUrl: "",// 正面
					reverseUrl: "",// 反面
				},
				selectList: [{
						value: '电子产品',
						label: '电子产品'
					},
					{
						value: '服装',
						label: '服装'
					},
					{
						value: '工艺品',
						label: '工艺品'
					}
				]
			};
		},
		methods: {
			// 选择地区回调
			regionConfirm(e) {
				this.companyInfo.region = e.province.label + '-' + e.city.label + '-' + e.area.label;
			},
			// 选择经营类目回调
			selectConfirm(e) {
				this.companyInfo.category = '';
				e.map((val, index) => {
					this.companyInfo.category += this.companyInfo.category == '' ? val.label : '-' + val.label;
				})
			},
			// 勾选版权协议
			checkboxChange(e) {
				this.agreement = e.value;
			},
			photo() {
				// 调用手机相机和获取相册功能
				uni.chooseImage({
				  count: 1,
				  sizeType: ['original', 'compressed'],
				  sourceType: ['camera','album'], //这要注意，camera掉拍照，album是打开手机相册
				  success: (res)=> {
				  console.log(res);
				  }
				})
			},
			// 身份证
			// 上传
			sfz_chagne(e) {
			    if (e.name == "obverse") {
			        this.companyInfo.obverseUrl = e.tempFilePath
			    } else if (e.name == "reverse") {
			        this.companyInfo.reverseUrl = e.tempFilePath
			    }
			},
			// 删除
			del_btn(e) {
			    if (e.name == "obverse") {
			        this.companyInfo.obverseUrl = ""
			    } else if (e.name == "reverse") {
			        this.companyInfo.reverseUrl = ""
			    }
			},
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		padding: 24rpx;
	}

	.photo{
		margin: 40upx;
	}

	.containner {
		background-color: #f7f7f7;
		min-height: 100vh;
		padding-top: 20upx;

		.companyInfo,.userInfo {
			// margin: 20upx 0;
			padding: 0 20upx;
			background-color: #fff;
		}
		.userInfo{
			margin: 20upx 0 40upx;
		}
		.card{
			display: flex;
			width: 100%;
			justify-content: space-around;
			.photos{
				background-color: #ECF2F9;
				width: 300upx;
				height: 200upx;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 5upx;
				// position: relative;
				// .photos1,.photos2{
				// 	width: 200upx;
				// 	height: 150upx;
				// 	background-size: 100%;
				// 	background-repeat: no-repeat;
				// 	position: absolute;
				// 	top: 50%;
				// 	left: 50%;
				// 	transform: translate(-50%,-50%);
				// }
			}
			.photos1,.photos2{
				width: 200upx;
				height: 150upx;
				background-size: 100%;
				background-repeat: no-repeat;
				// position: absolute;
				// top: 50%;
				// left: 50%;
				// transform: translate(-50%,-50%);
			}
			.photos1{
				// background-image: url('/static/icon/ID_front.png');
			}
			.photos2{
				// background-image: url('/static/icon/ID_back.png');
			}
		}
		.agreement {
			display: flex;
			align-items: center;
			margin: 40rpx;
			.agreement-text {
				padding-left: 8rpx;
				color: $u-tips-color;
			}
		}
		
		.btns{
			height: 100upx;
			width: 100%;
			background-color: #fff;
			position: fixed;
			bottom: 0;
			.btn{
				height: 74upx;
				line-height: 74upx;
				color: #fff;
				text-align: center;
				margin: 13upx 30upx;
				background-color: #01A90C;
				border-radius: 37upx;
			}
		}
	}
</style>